<script setup lang="ts">
import { useMessage, NButton, type DataTableColumns, NDataTable, useDialog } from 'naive-ui'
import { h, onMounted, ref } from 'vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse, HttpResponsePagination } from '@/utils/http'
import FixedAction from '@/components/FixedAction.vue'
import useRouteParam from '@/hooks/useRouteParam'
import useGoBack from '@/hooks/useGoBack'
import { useRoute } from 'vue-router'

type Data = any

const goBack = useGoBack('/bind')
const message = useMessage()
const route = useRoute()
const dialog = useDialog()
useRouteParam('id', () => refill())

const unLoading = ref(false)
const data = ref<Data[]>([])
const dataLoading = ref(false)
const columns: DataTableColumns<Data> = [
  {
    title: '用户名',
    key: 'userName',
    align: 'center'
  },
  {
    title: '手机号',
    key: 'phone',
    align: 'center'
  },
  {
    title: '操作',
    key: 'handle',
    align: 'center',
    render(e) {
      return h(
        NButton,
        {
          color: '#6CB187',
          onClick: () => {
            dialog.warning({
              title: '确认删除？',
              positiveText: '确认',
              negativeText: '取消',
              loading: unLoading.value,
              onPositiveClick: async () => {
                try {
                  unLoading.value = true
                  const [error, res] = await sendRequest<HttpResponse>({
                    module: 'role',
                    api: 'unbind',
                    override: {
                      data: {
                        roleId: route.params.id,
                        userId: e.id
                      }
                    }
                  })

                  if (error) return message.error(error.message)
                  if (res.code !== 0) message.error(res.msg)
                  message.success('解绑成功')
                  refill()
                } catch (error) {
                  console.log(error)
                } finally {
                  unLoading.value = false
                }
              }
            })
          }
        },
        {
          default: () => '角色解绑'
        }
      )
    }
  }
]

const refill = async () => {
  const id = route.params.id as string

  try {
    dataLoading.value = true
    const [error, res] = await sendRequest<HttpResponsePagination<Data>>({
      module: 'role',
      api: 'bind',
      override: {
        params: {
          roleId: id,
          limit: 999999
        }
      }
    })

    if (error) return message.error(error.message)
    if (res.code !== 0) message.error(res.msg)
    data.value = res.data.list
  } catch (error) {
    console.log(error)
  } finally {
    dataLoading.value = false
  }
}

onMounted(refill)
</script>

<template>
  <div class="bind-role">
    <div class="bind-role-header">反查角色</div>

    <NDataTable
      class="bind-role-table"
      :columns="columns"
      :data="data"
      :bordered="false"
      flex-height
    />
  </div>

  <FixedAction>
    <NButton
      @click="goBack"
      color="#5FB17F"
      style="width: 100rem; height: 50rem; margin: 0 auto; display: flex"
    >
      确认
    </NButton>
  </FixedAction>
</template>

<style scoped lang="scss">
.bind-role {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 110rem;
}

.bind-role-header {
  padding: 24rem 36rem 20rem;
  font-size: 16rem;
  border-bottom: 1px solid #ffffff;
}

.bind-role-table {
  flex: 1;
  padding: 20rem 20rem 15rem;
}
</style>
